<template>
  <div class="LoveTalk-container">
    <h2>我式LoveTalk组件</h2>
    <button @click="getTalk">获取图为清华</button>
    <ul>
      <li v-for="item in loveTalkStore.talkList" :key="item.id">
        {{ item.title }}
      </li>
    </ul>
  </div>
</template>

<script setup lang="ts" name="LoveTalk">
import { useLoveTalkStore } from "@/store/lovetalk";
import axios from "axios";
import { nanoid } from "nanoid";
import { reactive } from "vue";

// type Props = {}
// defineProps<Props>()
// const emit = defineEmits([])
// const router = useRouter()
// const route = useRoute()
let loveTalkStore = useLoveTalkStore();
// let talkList = reactive([
//   { id: "ftrfasdf01", title: "今天你有点怪，哪里怪？怪好看的！" },
//   { id: "ftrfasdf02", title: "草莓、蓝莓、蔓越莓，今天想我了没？" },
//   { id: "ftrfasdf03", title: "心里给你留了一块地，我的死心塌地" },
// ]);

function getTalk() {
  axios
    .get("https://api.uomg.com/api/rand.qinghua?format=json")
    .then((res) => {
      let {
        data: { content },
      } = res;
      console.log(content);
      let obj = { id: nanoid(), title: content };
      loveTalkStore.talkList.unshift(obj);
    })
    .catch((error) => {});
}
</script>

<style scoped lang="scss">
.LoveTalk-container {
  background-color: orange;
  padding: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px;
}
</style>
